<template>
  <div class="disposal">
    <div class="flex" style="padding:0rem 2rem;">
      <div class="img_nav flex2"><img src="../../../assets/img/comprehensive/components/3.png" alt="" /></div>
      <div class="flex1 title_top"><p class=" textC colorF">处置清单</p></div>
      <div class="img_nav1 flex2 textR"><img src="../../../assets/img/comprehensive/components/4.png" alt="" /></div>
      <div class="imgclone"><img src="../../../assets/img/comprehensive/components/clone.png" alt="" /></div>
    </div>
    <div class="flex" style="padding: 2.1875rem  4.5rem;">
      <div class="flexC JustifyContentSA flex5" style="padding: 0rem  1rem;">
        <div class="flexC">
          <ul class="flex tb_list font_s17 colorF textC">
            <li class="flex2 ">社会组织名称</li>
            <li class="flex3  ">社会信用代码</li>
            <li class="flex2 ">违法内容</li>
            <li class="flex2 ">行政处罚种类</li>
            <li class="flex2 ">来源方式</li>
            <li class="flex2 ">执法人员</li>
            <li class="flex1 ">操作</li>
          </ul>
          <div style="height:65vh;" class="colorF font_s18 Bold ">
            <ul class="flex tb_lists textC">
              <li class="flex2">上海玫瑰佳缘婚姻 介绍所</li>
              <li class="flex3">52310115575824094N</li>
              <li class="flex2">两年及两年以上 不参加年检</li>
              <li class="flex2">撤销登记</li>
              <li class="flex2">年度检查</li>
              <li class="flex2">王英 毕晓静</li>
              <li class="flex1 "><p class="subtitle">查看</p></li>
            </ul>
            <ul class="flex tb_lists textC">
              <li class="flex2">上海浦东新区 大团光耀养老院</li>
              <li class="flex3">52310115782435059W</li>
              <li class="flex2">两年及两年以上 不参加年检</li>
              <li class="flex2">撤销登记</li>
              <li class="flex2">年度检查</li>
              <li class="flex2">王英 毕晓静</li>
              <li class="flex1 "><p class="subtitle">查看</p></li>
            </ul>
            <ul class="flex tb_lists textC">
              <li class="flex2">上海东方桥 婚姻介绍所</li>
              <li class="flex3">52310115772866592E</li>
              <li class="flex2">两年及两年以上 不参加年检</li>
              <li class="flex2">撤销登记</li>
              <li class="flex2">年度检查</li>
              <li class="flex2">王英 毕晓静</li>
              <li class="flex1 "><p class="subtitle">查看</p></li>
            </ul>
            <ul class="flex tb_lists textC">
              <li class="flex2">上海浦东新区 盐仓社保养老院</li>
              <li class="flex3">5231011579707193XL</li>
              <li class="flex2">两年及两年以上 不参加年检</li>
              <li class="flex2">撤销登记</li>
              <li class="flex2">年度检查</li>
              <li class="flex2">王英 毕晓静</li>
              <li class="flex1 "><p class="subtitle">查看</p></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="flexC flex2 JustifyContentSA subtitle_right">
        <p class=" colorF font_s22">
          <img class="verticM" style="height: 1.5rem;" src="../../../assets/img/comprehensive/components/18.png" alt="" />
          <span style="padding-left:2rem ;">详情</span>
        </p>
        <div class="flex">
          <div class="flexC" style="width:0.125rem; position: relative; left: 1.8rem; background: #3C70B2; z-index: -2;"></div>
          <div class="flexC " style="padding-left:1rem ;">
            <div class="flexC">
              <div class="flex1 subtitle_icom font_s16 colorF Bold "><p>&nbsp;&nbsp;&nbsp;&nbsp;案件受理</p></div>
              <p class="font_s12 colorF  " style="padding: 0rem 3rem;  font-family:Helvetica Neue;font-weight:400;">2019-03-13</p>
              <div class="flex" style="padding-left:1.5rem;">
                <div class="flex" style="width:9.875rem;height:9.5625rem;border-radius:0.3125rem;">
                  <img src="../../../assets/img/comprehensive/components/chuzhiqingdan/01.jpg" style="width:9.875rem;height:9.5625rem;border-radius:0.3125rem;" alt="" />
                </div>
                <div class="flexC JustifyContentFE" style="padding:0rem 0.5rem;"><img src="../../../assets/img/comprehensive/components/20.png" alt="" /></div>
                <div class="flex" style="width:9.875rem;height:9.5625rem;border-radius:0.3125rem;">
                  <img src="../../../assets/img/comprehensive/components/chuzhiqingdan/01.jpg" style="width:9.875rem;height:9.5625rem;border-radius:0.3125rem;" alt="" />
                </div>
              </div>
            </div>
            <div class="flexC">
              <div class="flex1 subtitle_icom font_s16 colorF Bold "><p>&nbsp;&nbsp;&nbsp;&nbsp;立案调查</p></div>
              <p class="font_s12 colorF  " style="padding: 0rem 3rem;font-family:Helvetica Neue;font-weight:400;">2019-03-22</p>
              <div class="flex" style="padding-left:1.5rem;">
                <div class="flex" style="width:9.875rem;height:9.5625rem;border-radius:0.3125rem;">
                  <img src="../../../assets/img/comprehensive/components/chuzhiqingdan/01.jpg" style="width:9.875rem;height:9.5625rem;border-radius:0.3125rem;" alt="" />
                </div>
                <div class="flexC JustifyContentFE" style="padding:0rem 0.5rem;"><img src="../../../assets/img/comprehensive/components/20.png" alt="" /></div>
              </div>
            </div>
            <div class="flexC">
              <div class="flex1 subtitle_icom font_s16 colorF Bold "><p>&nbsp;&nbsp;&nbsp; &nbsp;调查终结</p></div>
            </div>
            <div class="flexC">
              <div class="flex1 subtitle_icom font_s16 colorF Bold "><p>&nbsp;&nbsp;&nbsp; &nbsp;处罚决定</p></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script></script>

<style lang="scss" scoped>
.disposal {
  width: 100%;
  height: 100%;
  .img_nav img {
    padding: 0.5rem;
    height: 2.875rem;
  }
  .img_nav1 img {
    padding: 0.5rem;
    height: 2.875rem;
  }
  .imgclone {
    position: absolute;
    top: 2.5rem;
    right: 6rem;
  }
  .title_top {
    padding: 1rem;
    font-size: 2.6875rem;
    font-family: FZLanTingHei-B-GBK;
    font-weight: 400;
    background: url(../../../assets/img/comprehensive/components/5.png) no-repeat;
    background-size: 100% 100%;
    font-weight: bold;
  }

  .tb_list {
    background-image: url(../../../assets/img/comprehensive/components/7.png);
    background-size: 100% 100%;
  }
  .tb_list li {
    padding: 0.8rem;
  }
  .tb_lists li {
    padding: 2.5rem 0.3rem;
  }
  .tb_lists {
    margin: 1.25rem 0rem;
    background-image: url(../../../assets/img/comprehensive/components/17.png);
    background-size: 100% 100%;
    .subtitle {
      border: 1px solid rgba(90, 161, 248, 1);
      border-radius: 13px;
      color: #7ff1ff;
    }
  }
  .tb_lists:hover {
    background-image: url(../../../assets/img/comprehensive/components/15.png);
    background-size: 100% 100%;
  }
  .subtitle_right {
    padding: 1rem;
    background: rgba(47, 50, 57, 0.32);
    border: 0.0625rem solid rgba(9, 102, 243, 0.72);
    border-radius: 0.75rem;
    .subtitle_icom {
      padding: 1.2rem;
      font-weight: bold;
      background: url(../../../assets/img/comprehensive/components/19.png) no-repeat;
      background-size: 60% 100%;
    }
  }
}
</style>
